﻿@page "/ui-blocks-footers"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Footers
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4" Style="max-width: 1000px;">
    A Footer block is the section at the bottom of a webpage or a dashboard, typically serving as a navigational and informational hub. It's an essential UI component, offering users access to key information, links, and resources that might not fit naturally in other parts of the screen.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase footer layouts with multi-column sitemaps containing categorized navigation links (Products/Solutions/Company/Legal), company branding, copyright information, simple centered footers with main navigation and copyright, and minimal footers with basic copyright notices.
</RadzenText>

<RadzenText Anchor="ui-blocks-footers#footer-with-sitemap" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Footer with a sitemap
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    A footer with navigation links in four columns.
</RadzenText>
<RadzenCard class="rz-p-0 rz-material-3-demo-card">
    <RadzenTabs class="example-tabs">
        <Tabs>
            <RadzenTabsItem Text="Dark footer">
                <section class="rz-background-color-base-darker rz-p-6 rz-p-sm-12" Style="min-height: 400px">
                <RadzenRow RowGap="3rem" Gap="1rem">
                    <RadzenColumn Size="12" SizeXS="6" SizeLG="4">
                        <RadzenStack AlignItems="Radzen.AlignItems.Start">
                            <RadzenImage Path="" AlternateText="Company Logo" />
                            <RadzenText Text="It's easier than you think." TextStyle="Radzen.Blazor.TextStyle.H5" class="rz-text-tertiary-color" />
                        </RadzenStack>
                    </RadzenColumn>
                    <RadzenColumn Size="12" SizeLG="8" SizeXL="6" OffsetXL="2">
                        <RadzenRow Gap="1rem" RowGap="3rem">
                            <RadzenColumn Size="12" SizeXS="6" SizeMD="3">
                                <RadzenStack AlignItems="Radzen.AlignItems.Start" Gap="1rem">
                                    <RadzenText Text="Products" class="rz-color-on-base-darker" TextStyle="Radzen.Blazor.TextStyle.H6" />
                                    <RadzenLink Text="Product 1" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
                                    <RadzenLink Text="Product 2" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
                                    <RadzenLink Text="Product 3" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
                                    <RadzenLink Text="Product 4" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
                                </RadzenStack>
                            </RadzenColumn>
                            <RadzenColumn Size="12" SizeXS="6" SizeMD="3">
                                <RadzenStack AlignItems="Radzen.AlignItems.Start" Gap="1rem">
                                    <RadzenText Text="Solutions" class="rz-color-on-base-darker" TextStyle="Radzen.Blazor.TextStyle.H6" />
                                    <RadzenLink Text="Solution 1" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
                                    <RadzenLink Text="Solution 2" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
                                    <RadzenLink Text="Solution 3" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
                                    <RadzenLink Text="Solution 4" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
                                    <RadzenLink Text="Solution 5" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
                                </RadzenStack>
                            </RadzenColumn>
                            <RadzenColumn Size="12" SizeXS="6" SizeMD="3">
                                <RadzenStack AlignItems="Radzen.AlignItems.Start" Gap="1rem">
                                    <RadzenText Text="Company" class="rz-color-on-base-darker" TextStyle="Radzen.Blazor.TextStyle.H6" />
                                    <RadzenLink Text="About us" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
                                    <RadzenLink Text="Blogs" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
                                    <RadzenLink Text="Support" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
                                    <RadzenLink Text="Jobs" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
                                </RadzenStack>
                            </RadzenColumn>
                            <RadzenColumn Size="12" SizeXS="6" SizeMD="3">
                                <RadzenStack AlignItems="Radzen.AlignItems.Start" Gap="1rem">
                                    <RadzenText Text="Legal" class="rz-color-on-base-darker" TextStyle="Radzen.Blazor.TextStyle.H6" />
                                    <RadzenLink Text="Privacy policy" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
                                    <RadzenLink Text="Terms of use" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
                                </RadzenStack>
                            </RadzenColumn>
                    </RadzenRow>
                    </RadzenColumn>
                </RadzenRow>
                <RadzenRow class="rz-border-top rz-border-color-base-800 rz-mt-12 rz-pt-8">
                    <RadzenColumn Size="12" Style="height: fit-content">
                        <RadzenText Text="Copyright &copy; 2025, Company Name Inc. All rights reserved." TextStyle="Radzen.Blazor.TextStyle.Body2" class="rz-m-0 rz-text-disabled-color" />
                    </RadzenColumn>
                </RadzenRow>
                </section>
            </RadzenTabsItem>
            <UIBlocks />
        </Tabs>
    </RadzenTabs>
</RadzenCard>

<RadzenText Anchor="ui-blocks-footers#centered-footer" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Centered Footer
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    A simple centered footer containing main navigation links and copyright info.
</RadzenText>
<RadzenCard class="rz-p-0 rz-material-3-demo-card">
    <RadzenTabs class="example-tabs">
        <Tabs>
            <RadzenTabsItem Text="Dark footer">
                <RadzenRow RowGap="3rem" Gap="1rem" class="rz-background-color-base-darker rz-p-6 rz-p-sm-12" Style="min-height: 300px">
                    <RadzenColumn Size="12" >
                        <RadzenStack AlignItems="Radzen.AlignItems.Center" class="rz-my-12">
                            <RadzenImage Path="" AlternateText="Company Logo"></RadzenImage>
                        </RadzenStack>
                        <RadzenStack Gap="2rem" Orientation="Radzen.Orientation.Horizontal" JustifyContent="Radzen.JustifyContent.Center" Wrap="Radzen.FlexWrap.Wrap" class="rz-my-12">
                            <RadzenLink Text="Home" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
                            <RadzenLink Text="Products" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
                            <RadzenLink Text="Solutions" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
                            <RadzenLink Text="Blog" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
                            <RadzenLink Text="Partners" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
                            <RadzenLink Text="Company" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
                        </RadzenStack>
                        <RadzenText Text="Copyright &copy; 2025, Company Name Inc. All rights reserved." TextStyle="Radzen.Blazor.TextStyle.Body2" class="rz-text-disabled-color rz-my-12" TextAlign="Radzen.TextAlign.Center" />
                    </RadzenColumn>
                </RadzenRow>
            </RadzenTabsItem>
            <UIBlocks />
        </Tabs>
    </RadzenTabs>
</RadzenCard>


<RadzenText Anchor="ui-blocks-footers#simple-footer" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Simple Footer
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    A basic footer containing copyright info.
</RadzenText>
<RadzenCard class="rz-p-0 rz-material-3-demo-card">
    <RadzenTabs class="example-tabs">
        <Tabs>
            <RadzenTabsItem Text="Theme's default">
                <RadzenRow class="rz-w-100 rz-mx-auto rz-p-6 rz-p-sm-12 " >
                    <RadzenColumn Size="12">
                        <RadzenText Text="Copyright &copy; 2025, Company Name Inc. All rights reserved." TextStyle="Radzen.Blazor.TextStyle.Body2" class="rz-m-0 rz-text-tertiary-color" />
                    </RadzenColumn>
                </RadzenRow>
            </RadzenTabsItem>
            <UIBlocks />
        </Tabs>
    </RadzenTabs>
</RadzenCard>






